<template>
          <div class="feature-total-list">
        <div class="feature-total-list-item" v-for="item in featureTotalList" :key="item">
          <div> {{item.name}} </div>
          <span
            >使用次数 <span
              style="
                color: rgb(255, 255, 255);
                font-family: DIN;
                font-size: 20px;
                font-weight: 700;
              "
              >{{item.use_count>10000?(item.use_count/10000) .toFixed(2):item.use_count}}</span
            > {{item.use_count>10000?"万":"次"}}</span
          >
          <span
            >使用人数 <span
              style="
                color: rgb(255, 255, 255);
                font-family: DIN;
                font-size: 20px;
                font-weight: 700;
              "
              >{{item.use_member>10000?(item.use_member/10000) .toFixed(2):item.use_member}}</span
            > {{item.use_member>10000?"万":"人"}}</span
          >
        </div>

      </div>
</template>

<script setup>
import { ref,onMounted } from "vue";
import {getFeatureTotal} from "@/api/api.js";

const featureTotalList = ref([
  {
    name: "3D百科",
    use_count: 27.7,
    use_member: 6.3,
  },
  {
    name: "学科资源",
    use_count: 27.7,
    use_member: 6.3,
  },
  {
    name: "实验测评",
    use_count: 27.7,
    use_member: 6.3,
  },
  {
    name: "安全教育",
    use_count: 27.7,
    use_member: 6.3,
  },
]);

onMounted(()=>{
  getFeatureTotal().then((res)=>{
    console.log('getFeatureTotal',res.data);
    featureTotalList.value = res.data
  })
})
</script>

<style lang="scss" scoped> 
.feature-total-list {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 2.57% 4.97%;
  &-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    // width: 25%;
    color: rgb(255, 255, 255);
    font-family: SiYuanHeiTi-CN;
    font-size: 14px;
    font-weight: 400;
    > div {
      color: rgb(24, 254, 240);
      font-family: SiYuanHeiTi-CN;
      font-size: 16px;
      font-weight: 700;
    }
  }
}</style>